<template>
  <a-drawer
    :title="model.packageName + ' 服务详情'"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    width="1000"
  >
    <a-spin :spinning="detailLoading">
      <a-row>
        <a-button v-if="model.status == 5" type="primary" style="float:right" @click="handleQuit">结束服务</a-button>
        <a style="float:right;margin-right:10px" @click="handleCheck2">查看服务协议</a>
        <a-button type="primary" style="margin-bottom: 5px;" @click="() => { addVisible = true }">添加服务</a-button>
        <!-- <a style="float:right;margin-right:10px" @click="handleCheck1">查看知情同意书</a> -->
      </a-row>
      <a-tabs v-if="details.length > 0" :defaultActiveKey="activeKey" :activeKey="activeKey" @change="changeActiveKey">
        <a-tab-pane v-for="item in details" :key="item.time.periodNum">
          <span class="cur" slot="tab">
            <span class="cur__title">{{ item.time.period }}</span>
            <span class="icon__sa" v-if="item.time.notFinished == true"></span>
          </span>
          <DetailsTable
            :status="model.status"
            :data="item.serviceItems"
            :executor="userInfo().realname"
            @refresh="refresh"
          />
        </a-tab-pane>
      </a-tabs>
      <a-empty v-else />
    </a-spin>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel1">
      <a-carousel autoplay arrows>
        <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
          <a-icon type="left-circle" />
        </div>
        <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
          <a-icon type="right-circle" />
        </div>
        <img :src="img" alt="" v-for="img in imgArr" :key="img" @mousewheel="imgwheel" />
      </a-carousel>
    </a-modal>
    <a-modal title="新增服务" :confirmLoading="confirmLoading"
    @ok="handleSubmit" :visible="addVisible" @cancel="handleCancel2">
      <a-form-model ref="form" :model="addModel" :rules="validatorRules">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="serviceName" required label="服务项目">
          <a-input placeholder="请输入服务项目" v-model="addModel.serviceName" :maxLength="50" />
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status" required label="是否已完成">
          <a-radio-group v-model="addModel.status">
            <a-radio :value="0"> 否 </a-radio>
            <a-radio :value="1"> 是 </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <quit-modal ref="quitModal"></quit-modal>
  </a-drawer>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction, deleteAction } from '@/api/manage'
import { mapGetters } from 'vuex'
import DetailsTable from './DetailsTable.vue'
import QuitModal from './QuitModal.vue'

export default {
  name: 'ServiceDetailModal',
  components: {
    DetailsTable,
    QuitModal
  },
  data() {
    return {
      title: '操作',
      visible: false,
      previewVisible: false,
      addVisible: false,
      detailLoading: true,
      confirmLoading: false,
      model: {},
      details: [],
      zoomVal: 1,
      imgArr: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      url: {
        getServiceDetails: '/107/03/1070315'
      },
      activeKey: 0,
      addModel: {
        serviceName: "",
        status: 0
      },
      validatorRules: {
        serviceName: [{ required: true, message: '请输入服务项目!' }],
        status: [{ required: true, message: '请完成情况!' }]
      },
    }
  },
  created() {},
  methods: {
    ...mapGetters(['userInfo','doctorId']),
    view(record) {
      this.visible = true
      this.model = Object.assign({}, record)
      this.getServiceDetail()
    },
    getServiceDetail() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      postAction(this.url.getServiceDetails, {
        patientId: patientId,
        packageId: this.model.packageId
      })
        .then(res => {
          if (res.success) {
            this.details = res.result.totalServiceItems
            this.consentImage = res.result.basicInfo.consentImage.split(',') || []
            this.protocolImage = res.result.basicInfo.protocolImage.split(',') || []
            // this.activeKey = res.result.defaultPeriod
          } else {
            this.details = []
          }
        })
        .finally(_ => {
          this.detailLoading = false
        })
    },
    handleCheck1() {
      this.previewVisible = true
      this.imgArr = this.consentImage
    },
    handleCheck2() {
      this.previewVisible = true
      this.imgArr = this.protocolImage
    },
    handleCancel1() {
      this.previewVisible = false
    },
    handleCancel2() {
      this.addVisible = false
      this.addModel = {
        serviceName: "",
        status: 1
      }
    },
    imgwheel() {
      let e = e || window.event
      const body = document.querySelector('.ant-modal-body')
      this.zoomVal += e.wheelDelta / 1200
      console.log(this.zoomVal)
      if (this.zoomVal >= 0.2) {
        body.style.transform = `scale(${this.zoomVal})`
        // this.wheel = `transform:scale(${this.zoomVal});`
      } else {
        this.zoomVal = 0.2
        body.style.transform = `scale(${this.zoomVal})`
        // this.wheel = `transform:scale(${this.zoomVal});`
        return false
      }
    },
    handleQuit() {
      // this.$message.warning('待联调')
      this.$refs.quitModal.edit(this.model.basicInfo)
    },
    changeActiveKey(key) {
      this.activeKey = key
    },
    refresh() {
      this.detailLoading = true
      this.getServiceDetail()
    },
    // 关闭
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
    },
    handleSubmit() {
      const that = this
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let index = this.details.findIndex(item => {
            return this.activeKey == item.time.periodNum
          })
          let model = {
            serviceName: that.addModel.serviceName,
            status: that.addModel.status,
            relationId: that.model.packageId,
            patientId: that.$route.query[PAGE_MENU_TYPE.PatientId],
            doctorId: this.doctorId(),
            period: this.activeKey,
            periodUnit: index != -1 ? this.details[index].time.unit : 0
          }
          postAction('/107/03/1070321', model).then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.getServiceDetail()
              this.handleCancel2()
            } else {
              this.$message.warning(res.message)
            }
          }).finally(() => {
            this.confirmLoading = false;
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.cur {
  display: flex;
  align-items: flex-start;
  .cur__title {
    flex: 1;
    margin: 0 1.5rem 0 1.5rem;
  }
  .icon__sa {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    margin-top: 0.4rem;
  }
}
</style>
<style scoped>
.ant-carousel >>> .slick-slide {
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
</style>

